import Vue from 'vue'

// A modern alternative to CSS resets
import 'normalize.css/normalize.css'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// lang i18n
import locale from 'element-ui/lib/locale/lang/en'

// global css
import '@/styles/index.scss'

import App from '@/App.vue'
import store from '@/store/index.js'
import router from '@/router/index.js'
import API from '@/api/index.js'

// icon
import '@/icons'
// permission control
import '@/permission'

import * as echarts from 'echarts'

/**
 * [Step 01]: Download MockJS
 *   npm install mockjs --save-dev
 * [Step 02]: Import mock.js into main.js method (not recommended)
 *   import { mockXHR } from '../mock'
 *   if (process.env.NODE_ENV === 'production') {
 *     mockXHR()
 *   }
 * [Step 02]: Configure the file vue.config.js method
 *   module.exports = {
 *     devServer: {
 *       // TODO -> webpack-devser@3.X Use of
 *       before: require('./mock/mock-server.js')
 *       // TODO -> webpack-devser@4.X Use of
 *       // onBeforeSetupMiddleware: (app, server, compiler) => { require('./mock/mock-server.js') }
 *     },
 *   }
 * [Step 03]: Rewrite the underlying method mockXHR()
 *   function mockXHR() {
 *     Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
 *     Mock.XHR.prototype.send = function() {
 *       if (this.custom.xhr) {
 *         this.custom.xhr.withCredentials = this.withCredentials || false
 *         if (this.responseType) {
 *           this.custom.xhr.responseType = this.responseType
 *         }
 *       }
 *       this.proxy_send(...arguments)
 *     }
 *     function XHR2ExpressReqWrap(respond) {
 *       return function(options) {
 *         let result = null
 *         if (respond instanceof Function) {
 *           const { body, type, url } = options
 *           result = respond({
 *             method: type,
 *             body: JSON.parse(body),
 *             query: param2Obj(url)
 *           })
 *         } else {
 *           result = respond
 *         }
 *         return Mock.mock(result)
 *       }
 *     }
 *     for (const i of mocks) {
 *       // Generate simulation data based on the data template.
 *       Mock.mock(new RegExp(i.url), i.type || 'get', XHR2ExpressReqWrap(i.response))
 *     }
 *   }
 * [Step 04]: Import and create template data
 *   const data = require('./data.json')
 *   module.exports = [{
 *     url: '/vue-admin-template/home/list',
 *     type: 'get',
 *     response: (config) => {
 *       return { code: 20000, data: data }
 *     }
 *   }]
 * [Step 05]: Template data file - data.json
 *   {
 *     "id": 114779,
 *     "username": "LiuWeiWei",
 *     "password": "12345678",
 *     "numberArray": [
 *       10000,
 *       10010,
 *       10086,
 *       12306,
 *       12580
 *     ]
 *   }
 * [Tips]
 * 1. If you don't want to use mock-server you want to use MockJs for mock api.
 * 2. You can execute: mockXHR().
 * 3. Precondition: Process environment variable configuration.
 * 3.1. .env.development
 *     [NODE_ENV = development] + [ENV = 'development'] + [VUE_APP_BASE_API = '/prod-api' + VUE_APP_MOCK_API = '/mock-api']
 * 3.2. .env.production
 *     [NODE_ENV = production] + [ENV = 'production'] + [VUE_APP_BASE_API = '/prod-api']
 * 3.3. .env.staging
 *     [NODE_ENV = staging] + [ENV = 'staging'] + [VUE_APP_BASE_API = '/prod-api']
 * 3.4. .env.testing
 *    [NODE_ENV = testing] + [ENV = 'testing'] + [VUE_APP_BASE_API = '/prod-api']
 */
if (process.env.NODE_ENV === 'development') {
  const { mockXHR } = require('../mock/index.js')
  mockXHR()
}

// set ElementUI lang to EN
Vue.use(ElementUI, { locale })

Vue.config.productionTip = false

Vue.prototype.$API = API

Vue.prototype.$echarts = echarts

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

